<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>我要买菜-分类</title>
	<link rel="stylesheet" type="text/css" href="css/common/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/common/common.css" />
	<link rel="stylesheet" type="text/css" href="css/category/category.css" />
	<link rel="stylesheet" type="text/css" href="css/category/area.css" />
</head>

<body>
	<div class="category-header">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-left">
					<a href="#">
						<i class="iconfont" style="margin-left: 10px;">&#xe60d;</i>
						<span>扫一扫</span>
					</a>
				</div>
				<div class="col-xs-6 d-adres text-center">
					<label class="badgetip">配送至</label>&nbsp;
					<label>广州电子商务</label>
					<a href="#">
						<l class="iconfont">&#xe603;</l>
					</a>
				</div>
				<div class="col-xs-3 text-right">
					<a href="#">
						<i class="iconfont">&#xe606;</i>&nbsp;
						<span>搜索</span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid main d-scroll-wrap">
		<div class="row">
			<div class="col-xs-12 category-note">公告：本店将于2016-02-06至2016-02-17期间正常送货</div>
		</div>
		<div class="row area-con">
			<div class="col-xs-4 category-left">
				<ul class="nav nav-pills nav-stacked">
					<li>抢购区</li>
					<li class="current"><a href="">蔬菜水果</a></li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>生鲜</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>蔬菜水果</li>
					<li>生鲜</li>
				</ul>
			</div>
			<div class="col-xs-8 category-right">
				<ul class="list-group">
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><span class="badge">精选</span>&nbsp;小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><span class="badge">精选</span>&nbsp;小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>

					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>

					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media area-item">
							<div class="pull-left">
								<a href="#">
									<img class="media-object" src="img/category/cai.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">小白菜</h4>
								<p>200-300</p>
								<div class="row">
									<div class="col-xs-6 area-price">￥5.5&nbsp;<span>￥7.5</span></div>
									<div class="col-xs-6 area-count">
										<div class="cart_change_num pull-right">
											<img src="img/common/jian.png" class="jian" />
											<span>1</span>
											<img src="img/common/jia.png" class="jia" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
	<footer>
		<ul class="footer clearfix">
			<li><a href="index.html"><i class="iconfont">&#xe601;</i><p>首页</p></a></li>
			<li class="selected"><a href="category.html"><i class="iconfont second">&#xe616;</i><p>分类</p></a></li>
			<li><a href="shopping_cart.html"><i class="iconfont">&#xe611;</i><p>购物车</p></a></li>
			<li><a href="#"><i class="iconfont">&#xe615;</i><p>充值有礼</p></a></li>
			<li><a href="user.html"><i class="iconfont">&#xe609;</i><p>我</p></a></li>
		</ul>
	</footer>
	<script src="js/common/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function() {


			$(".jia").bind("click", function() {
				var i = Number($(this).siblings("span").html());
				i++;
				$(this).siblings("span").html(i);
			});
			$(".jian").bind("click", function() {
				var i = Number($(this).siblings("span").html());
				if (i == 0) {
					return;
				}
				i--;
				$(this).siblings("span").html(i);
			});

			//设置高度
			$(window).resize(function() {
				var h = $(window).height() - $('.category-header').outerHeight(true) - $('.footer').outerHeight(true);
				$('.d-scroll-wrap').height(h);
				$('.area-con').height(h - $('.category-note').outerHeight(true));
			});
			$(window).trigger('resize');
		})
	</script>
</body>

</html>
